<template>
    <div class="neikuang">
         <!-- 弹窗层 -->
        <div class="heise" v-show="TanChuang">
            <div class="dl_box">
                <div class="tc_top">
                    <div :class="cut_huan==false ? 'vac_s vvv':'vac_s'" @click="cut_huan = false;">账号登录</div>
                    <div :class="cut_huan==true ? 'vac_s vvv':'vac_s'" @click="cut_huan = true;">注册账号</div>
                </div>
                <div class="chahao_Lo" @click="Guanbi()">
                    <img src="../../assets/image/chahao.png" alt="">
                </div>
                <!-- 登录 -->
                <div class="Denglu_logo" v-show="!cut_huan">
                    <div class="quankuang_box">
                        <img class="rouTou" src="../../assets/image/yonghu.png" alt="">
                        <input type="text" v-model="LListen.nl_sj" placeholder="手机" @input="listenIn_L_sj">
                    </div>
                    <p class="pp_op" v-show="Llist.sj">请输入正确的手机号格式</p>
                    <div class="quankuang_box">
                        <img class="rouTou" src="../../assets/image/mima.png" alt="" >
                        <input type="password" v-model="LListen.nl_mima" placeholder="密码" @input="listenIn_L_mima">
                    </div>
                    <p class="pp_op" v-show="Llist.mm">密码不能为空</p>
                    <div class="dl_div" @click="DengLu()"> 登 录 </div>
                    <div class="vm_kk">
                        <input type="checkbox" v-model="DlcheBs"> 登录即代表同意 
                        <span @click="ToYh()">《用户协议》</span> 和
                        <span @click="ToYs()">《隐私政策》</span>
                    </div>
                </div>
                <!-- 注册 -->
                <div class="Zhuce_logo" v-show="cut_huan">
                    <div class="quankuang_box">
                        <img class="rouTou" src="../../assets/image/sj.png" alt="">
                        <input type="text" v-model="RListen.n_sj" placeholder="输入手机号" @input="listenIn_R_sj">
                    </div>
                    <p class="pp_op" v-show="Plist.sj">请输入正确的手机号格式</p>
                    <div class="quankuang_box">
                        <img class="rouTou" src="../../assets/image/yzm.png" alt="">
                        <input type="text" v-model="RListen.n_yzm" placeholder="输入验证码" @input="listenIn_R_yzm">
                        <div class="HUO_qu" @click="HuoquZym">{{Tme}}</div>
                    </div>
                    <p class="pp_op" v-show="Plist.yzm">验证码不能为空</p>
                    <div class="quankuang_box">
                        <img class="rouTou" src="../../assets/image/mima.png" alt="">
                        <input type="password" v-model="RListen.n_mima" placeholder="输入密码" @input="listenIn_R_mima">
                    </div>
                    <p class="pp_op" v-show="Plist.mm">请输入6至8位的数字或大小写字母</p>
                    <div class="quankuang_box">
                        <img class="rouTou" src="../../assets/image/mima.png" alt="">
                        <input type="password" v-model="RListen.n_qr" placeholder="确认密码" @input="listenIn_R_qr">
                    </div>
                    <p class="pp_op" v-show="Plist.qr">两次密码不一致</p>
                    <div class="vm_kk">
                        <input type="checkbox" v-model="cheBs"> 我已阅读并同意 
                        <span @click="ToYh()">《用户协议》</span> 和
                        <span @click="ToYs()">《隐私政策》</span>
                    </div>
                    <div class="dl_div" @click="RegisterAccount()"> 注 册 </div>
                </div>
            </div>
        </div>
        <!-- 导航栏 -->
        <div class="hd_box">
            <div class="juzhong">
                <div class="left_fenlei"> 
                    <!-- logo -->
                    <div class="logo_img" @click="$router.push('/')">
                        <img src="../../assets/image/shitou.png" alt="">
                        <span>狮觉小说网</span>
                    </div>
                    <ul class="ul_tt">
                        <li class="bai_se" @click="$router.push('/');">首页</li>
                        <li class="bai_se" @click="$router.push('/thecharts');">排行</li>
                        <li class="bai_se" @click="$router.push('/shuku/all'); $store.state.endState = 0;">分类</li>
                        <li class="bai_se" @click="$router.push('/shuku/end'); $store.state.endState = 2">完结</li>
                        <li class="bai_se" @click="$router.push('/shuku/serialize'); $store.state.endState = 1">连载</li>
                    </ul>

                    <div class="xieshu" @click="TO_Zuojia()">
                        <img src="../../assets/image/bianji2.png" alt="">
                        我要创作
                    </div>
                </div>
                <div class="right_to">
                    <div class="sou_suo" @click="Sousuo()">
                        <div class="input">
                            请输入关键字或作品名
                        </div>
                        <img src="../../assets/image/sousuo.png" alt="">
                    </div>
                    
                    <div class="shujia" @click="bookjia()">
                        <img src="../../assets/image/f-vip2.png" alt="">
                        开通会员
                    </div>
                    <div class="dl_" v-show="$store.state.dlBoole==''">
                        <span @click="Denglu()">
                            登录
                        </span>|
                        <span @click="Zhuce()">
                            注册
                        </span>
                    </div>
                    <div class="dl_" v-show="!$store.state.dlBoole==''" @click="$router.push('/person')">
                        <span>
                           {{$store.state.dlBoole.bookfrd}}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</template>
<script>
import axios from 'axios';


export default {
    name:"toubu",
    data(){
        return{
            nvt:[{name:'首页'},{name:'排行'},{name:'分类'},{name:'完本'},{name:'连载'}],
            TanChuang:false,//弹窗开关
            cut_huan:false,// false 登录 true 注册
            Plist:{sj:false,yzm:false,mm:false,qr:false},//注册提示
            Llist:{sj:false,mm:false},//登录提示
            //注册model
            RListen:{
                n_sj:'',
                n_yzm:'',
                n_mima:'',
                n_qr:''
            },
            //登录model
            LListen:{
                nl_sj:'',
                nl_mima:'',
            },
            phoneRegex: /^1[3-9]\d{9}$/,//正则验证
            cheBs:false, //同意协议
            DlcheBs:false,//
            Tme:'获取验证码', //验证码倒计时

        }
    },
    methods:{

       
        //监听登录手机号
        listenIn_L_sj(event){
            if(this.phoneRegex.test(event.target.value)){
                this.Llist.sj=false;
            }else{
                this.Llist.sj=true;
            }
        },
         //监听登录密码
        listenIn_L_mima(event){
            if(event.target.value!==''){
                this.Llist.mm=false;
            }else{
                this.Llist.mm=true;
            }
        },
        //监听注册手机号
        listenIn_R_sj(event){
            if(this.phoneRegex.test(event.target.value)){
                this.Plist.sj=false;
            }else{
                this.Plist.sj=true;
            }
        },
        //监听注册验证码
        listenIn_R_yzm(event){
            if(event.target.value!==''){
                this.Plist.yzm=false;
            }else{
                this.Plist.yzm=true;
            }
        },
        //监听注册密码长度
        listenIn_R_mima(event){
            if(event.target.value.length>=6){
                this.Plist.mm=false;
            }else{
                this.Plist.mm=true;
            }
        },
        //监听注册确认密码是否一致
        listenIn_R_qr(event){
            if(event.target.value===this.RListen.n_mima){
                this.Plist.qr=false;
            }else{
                this.Plist.qr=true;
            }
        },
        //huoqu验证码
        HuoquZym(){
            if(this.RListen.n_sj!==''){
                if(this.Tme !== '获取验证码'){
                    this.$message({
                        message: '请等待验证码倒计时结束',
                        type: 'warning',
                        duration: 1000
                    });
                    return;
                }
                let count = 60; // 验证码倒计时
                const interval = setInterval(() => {
                    if (count > 0) {
                        this.Tme = `${count}秒后重新获取`;
                        count--;
                    } else {
                        clearInterval(interval);
                        this.Tme= '获取验证码'; // 重置验证码输入框
                    }
                }, 1000);
                axios.post('/api/index/register', { phone: this.RListen.n_sj,action:'send_code' })
                .then(response => {
                    console.log('验证码发送成功:', response.data);
                    if(response.data.code !== 200){    
                        this.$message({
                            message: response.data.msg,
                            type: 'success',
                            duration: 1000
                        });
                    }  
                }).catch(error => {
                    console.error('验证码发送失败:', error);
                    this.$message({
                        message: '验证码发送失败，请稍后再试',
                        type: 'error',
                        duration: 1000
                    });
                });
            }else{
                this.$message({
                    message: '请先输入手机号',
                    type: 'warning',
                    duration: 1000
                });
            }
           
        },
         //注册账号
        RegisterAccount(){
            const Pl = this.Plist;
            console.log(Pl,this.cheBs);
            if(Pl.sj==false&& Pl.yzm==false && Pl.mm==false && Pl.qr==false){
                if(this.cheBs==false){
                    this.$message({
                        message: '请同意用户协议和隐私政策',
                        type: 'warning',
                        duration: 1000
                    });
                    return;
                }
                const data = {
                    phone: this.RListen.n_sj,
                    code: this.RListen.n_yzm,
                    password: this.RListen.n_mima,
                    action:'register'
                };
                axios.post('/api/index/register', data)
                .then(response => {
                    console.log('注册请求成功:', response.data);
                    if(response.data.code === 1){
                        this.$message({
                            message: '注册成功',
                            type: 'success',
                            duration: 1000
                        });
                        this.cut_huan = false;
                    }else{
                        this.$message({
                            message: response.data.msg,
                            type: 'error',
                            duration: 1000
                        });
                    }
                }).catch(error => {
                    console.error('注册请求失败:', error);
                    this.$message({
                        message: '注册失败，请稍后再试',
                        type: 'error',
                        duration: 1000
                    });
                });
            }else{
                this.$message({
                    message: '请完善表单信息',
                    type:'warning',
                    duration:1000
                });
                
            }
        },
        //登录展示
        Denglu(){
            this.TanChuang = true;
            this.cut_huan = false;
        },
        //登录
        DengLu(){
            const Ll = this.Llist;
            if(Ll.sj==false && Ll.mm==false){
                 if(this.DlcheBs==false){
                    this.$message({
                        message: '请同意用户协议和隐私政策',
                        type: 'warning',
                        duration: 1000
                    });
                    return;
                }
                const data = {
                    phone: this.LListen.nl_sj,
                    password: this.LListen.nl_mima
                };
                axios.post('/api/index/login', data)
                .then(response => {
                    console.log('登录请求成功:', response);
                    if(response.data.code === 1){
                        this.$message({
                            message: '登录成功',
                            type: 'success',
                            duration: 1000
                        });
                        //存储本地状态
                        localStorage.setItem('IceLion', JSON.stringify(response.data.data));
                        // 存储到vueX中
                        this.$store.commit('setUserInfo',JSON.parse(localStorage.getItem('IceLion')));
                        this.TanChuang = false;
                    }else{
                        this.$message({
                            message: response.data.msg,
                            type: 'error',
                            duration: 1000
                        });
                    }
                }).catch(error => {
                    console.error('登录请求失败:', error);
                    this.$message({
                        message: '登录失败，请稍后再试',
                        type: 'error',
                        duration: 1000
                    });
                });
            }else{
                this.$message({
                    message: '请完善表单信息',
                    type:'warning',
                    duration:1000
                });
            }
        },
        //注册展示
        Zhuce(){
            this.TanChuang = true;
            this.cut_huan = true;
        },
        //关闭
        Guanbi(){
            this.TanChuang = false;
        },
        
        //跳转收藏
        bookjia(){
            this.$router.push('/Recharge');
        },
        //跳转到搜索
        Sousuo(){
            this.$router.push('/sousuo');
        },
        //跳转到作家
        TO_Zuojia(){
            this.$router.push('/writing');
        },
        //跳转用户协议
        ToYh(){
            this.TanChuang= false;
            this.$router.push('/yhxy');
        },
        //跳转用户协议
        ToYs(){
            this.TanChuang= false;
            this.$router.push('/ysxy');
        },
    }
}
</script>
<style scoped lang="scss">
.neikuang{
    position: relative;
}
.pp_op{
    color: #ff0000;
    font-size: 13px;
}
    .hd_box{
        width: 100%;
        height: 44px;
        overflow: hidden;
        background-color: #000000;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 100;
        .juzhong{
            max-width: 1200px;
            width: 1200px;
            height: 100%;
            // background-color: rgb(38, 38, 38);
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left_fenlei{
                height: 100%;
                display: flex;
                align-items: center;
                
                .logo_img{
                    width: 150px;
                    height: 45px;
                    display: flex;
                    align-items: center;
                    color: rgb(241, 241, 241);
                    font-size: 14px;
                    cursor: pointer;
                    margin-right: 10px;
                    img{
                        height: 70%;
                        margin-right: 10px;
                    }
                }
                .ul_tt{
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-left: 20px;
                    .bai_se{
                        height: 100%;
                        color: #c0c0c0;
                        font-size: 14px;
                        padding:0 15px;
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                        transition: 0.2s;
                    }
                    .bai_se:hover{
                        height: 100%;
                        color: #fff;
                        background-color: #0f0f0f;
                        transition: 0.2s;
                    }
                }
                .xieshu{
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #c0c0c0;
                    font-size: 14px;
                    cursor: pointer;
                    border-radius: 5px;
                    margin-left: 10px;
                    padding: 0 8px;
                    img{
                        width: 20px;
                        margin-right: 5px;
                    }
                }
                .xieshu:hover{
                    color: #fff;
                    background-color: #0f0f0f;
                    transition: 0.2s;
                    padding: 0 8px;
                }
            }
            .right_to{
                display: flex;
                align-items: center;
                height: 100%;
                .sou_suo{
                    height: 25px;
                    display: flex;
                    align-items: center;
                    position: relative;
                    margin-right: 20px;
                    cursor: pointer;
                    .input{
                        width: 180px;
                        outline: none;
                        height: 100%;
                        background: none;
                        color: #d6d6d6;
                        border: none;
                        font-size: 14px;
                        border-bottom: solid 1px #ededed;
                        padding: 2px 10px;
                        padding-right: 20px;
                    }
                    input::input-placeholder{
                        color: #ff0000;
                    }
                    img{
                        width: 20px;
                        height: 20px;
                        position: absolute;
                        right: 0;
                    }
                }
                .dl_{
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    color: #747474;
                    cursor: pointer;
                    span{
                        color: #c0c0c0;
                        padding: 10px;
                        transition: 0.2s;
                    }
                    span:hover{
                        transition: 0.2s;
                        color: #ffffff;
                    }
                }
                .shujia{
                    color: #c0c0c0;
                    display: flex;
                    font-size: 14px;
                    cursor: pointer;
                    align-items: center;
                    padding: 15px 15px;
                    transition: 0.2s;
                    img{
                        margin-right: 3px;
                        width:20px;
                    }
                }
                .shujia:hover{
                    height: 100%;
                    background-color: #0f0f0f;
                    color: #fff;
                    transition: 0.2s;
                }
            }
        }
    }
    .heise{
        width: 100vw;
        height: 100vh;
        position: fixed;
        background-color: rgba($color: #000000, $alpha: 0.7);
        z-index: 200;
        display: flex;
        align-items: center;
        justify-content: center;
        .dl_box{
            background-color: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 25px 30px;
            position: relative;
            border-radius: 10px;
            //叉号-关闭
            .chahao_Lo{
                position: absolute;
                top: 10px;
                right: 10px;
                cursor: pointer;
                img{
                    width: 20px;
                    height: 20px;
                }
            }
            //切换 登陆注册
            .tc_top{
                width: 200px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .vac_s{
                    padding: 5px 5px;
                    cursor: pointer;
                    
                }
                .vvv{
                    border-bottom: solid 3px #ff0000;
                }
            }
            //登录
            .Denglu_logo{
                display: flex;
                flex-direction: column;
                justify-content: center;
                .quankuang_box{
                    width: 320px;
                    height: 40px;
                    border: solid 1px #c2c2c2;
                    display: flex;
                    align-items:center;
                    margin-top: 7%;
                    position: relative;
                    overflow: hidden;
                    border-radius: 5px;
                    .rouTou{
                        width: 20px;
                        margin-left: 3%;
                        z-index: 5;
                    }
                    input{
                        height: 100%;
                        width: 100%;
                        outline: none;
                        border: none;
                        position: absolute;
                        z-index: 2;
                        background-color: #fff !important;
                        padding-left: 13%;
                    }
                   
                }
                .wjmm{
                    width: 100%;
                    text-align: right;
                    font-size: 13px;
                    color: #0f0f0f;
                    margin-top: 3%;
                    cursor: pointer;
                }
                .dl_div{
                    width: 100%;
                    height: 40px;
                    word-spacing: 20px;
                    background-color: rgb(191,46,36);
                    text-align: center;
                    line-height: 40px;
                    font-size: 15px;
                    color: #fff;
                    margin-top: 3%;
                    cursor: pointer;
                    transition: 0.3s;
                    border-radius: 5px;
                    margin-top: 20px;
                }
                .dl_div:hover{
                    transition: 0.3s;
                    background-color: #e10000;
                }
                .vm_kk{
                    font-size: 13px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-top: 5%;
                    cursor: pointer;
                    input{
                        margin-right: 3px;
                        cursor: pointer;
                    }
                }
            }
            //注册
            .Zhuce_logo{
                .quankuang_box{
                    width: 320px;
                    height: 40px;
                    border: solid 1px #c2c2c2;
                    display: flex;
                    align-items:center;
                    margin-top: 7%;
                    position: relative;
                    overflow: hidden;
                    border-radius: 5px;
                    .rouTou{
                        width: 20px;
                        margin-left: 3%;
                        z-index: 5;
                    }
                    input{
                        height: 100%;
                        width: 100%;
                        outline: none;
                        border: none;
                        position: absolute;
                        z-index: 2;
                        background-color: #fff !important;
                        padding-left: 13%;
                    }
                    .HUO_qu{
                        position: absolute;
                        right: 5%;
                        z-index: 5;
                        font-size: 13px;
                        color: #3e3d43;
                        cursor: pointer;
                    }
                }
                .dl_div{
                    width: 100%;
                    height: 40px;
                    word-spacing: 2px;
                    background-color: rgb(191,46,36);
                    text-align: center;
                    line-height: 40px;
                    font-size: 15px;
                    color: #fff;
                    margin-top: 5%;
                    cursor: pointer;
                    transition: 0.3s;
                    border-radius: 5px;
                }
                .dl_div:hover{
                    transition: 0.3s;
                    background-color: #e10000;
                }
                .vm_kk{
                    font-size: 13px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-top: 5%;
                    input{
                        margin-right: 3px;
                        cursor: pointer;
                    }
                }
            }
        }
    }
</style>